import { Component, Fragment } from 'react'
import { View, Button } from '@tarojs/components'
import './login-compont.scss'

import Taro from '@tarojs/taro'
import { EventKey, PureStandardProps } from '@/src/consts'
import { connect } from 'react-redux'
import { State } from '@/src/dva/state'
import { UserState } from '@/src/dva/models/user'
import Global from '@/src/lib/global'
import  Event   from '@/src/dva/event';
// 创建事件总线
const eventBus = new Event ();

interface LoginCompentProps extends PureStandardProps {
    initShow?: boolean,
    userState?: UserState
    dispatch?: any,
}

interface LoginCompentState {
    isShow: boolean
}

export class LoginCompent extends Component<LoginCompentProps, LoginCompentState> {

    loginCallback?: (isOk: boolean) => void
    constructor(props: LoginCompentProps) {
        super(props)
        this.state = {
            isShow: props.initShow ?? false
        }
    }

    onCancel = () => {
        this.hide()
    }

    onConfirm = () => {
        const { dispatch } = this.props

        if (!dispatch) {
            return
        }

        if (!Global.shared.hasNetwork) {
            Global.showToast("当前无网络连接")
            return
        }

        Taro.getUserProfile({ desc: '用于完善会员资料', lang: 'zh_CN' }).then((res) => {

            dispatch({
                type: "user/setWxUserInfo",
                payload: res.userInfo
            })

            Taro.showLoading()
            dispatch({
                type: "user/login",
            }).then((ret) => {
                Taro.hideLoading()
                if (this.loginCallback) {
                   
                    this.loginCallback(ret)
                   
                }

                if (ret) {
                   
                    Taro.eventCenter.trigger(EventKey.LoginStatusChange)
                   
                    this.hide()
                }
                 // 发送全局事件，告诉组件事件已完成
                 const loginTrue = true
                 eventBus.emit("sayHello",loginTrue);
                
            })

        }).catch((error) => {
            console.log(error)
        })
    }

    show = () => {
        this.setState({
            isShow: true
        })
    }

    hide = () => {
        this.setState({
            isShow: false
        })
    }

    render() {
        const { isShow } = this.state

        return (
            <Fragment>
                <View>
                    <View className="panges dis" style={{ display: isShow ? "flex" : "none" }}>
                        <View className="pages_min">
                            <View className="min_tops dis">我们将要获取您的头像、昵称等信息</View>
                            <View className="min_bot">
                                <View className="lefts dis" onClick={this.onCancel}>取消</View>
                                <View className="lefts rig dis" >
                                    <Button open-type="getUserProfile" onClick={this.onConfirm}> 确定</Button>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
            </Fragment>
        )
    }
}

export default connect((state: State) => ({ user: state.user }), (dispatch) => ({ dispatch }), null, { forwardRef: true })(LoginCompent)